<template>
    <div class="amplifier-panel" :style="amplifierPanelStyle">
        <div class="controls">
            <knob v-for="control in controls" :key="control.label" :label="control.label"
                :style="{ left: control.left }" @valueChange="handleKnobChange">
            </knob>
        </div>
        <div class="toggle-switch" :style="{ left: toggleSwitchPosition.left, top: toggleSwitchPosition.top }">
            <toggle-switch></toggle-switch>
        </div>
    </div>
</template>

<script>
import { ref, computed } from 'vue';
import Knob from './Knob.vue';
import ToggleSwitch from './ToggleSwitch.vue';

export default {
    name: 'AmplifierPanel',
    components: { Knob, ToggleSwitch },
    setup() {
        const controls = ref([
            { label: 'PRE GAIN', left: '25.5%' },
            { label: 'LOW', left: '36.1%' },
            { label: 'MID', left: '46.8%' },
            { label: 'HIGH', left: '57.5%' },
            { label: 'PRESENCE', left: '68.1%' },
            { label: 'POSTGAIN', left: '78.7%' }
        ]);

        const toggleSwitchPosition = ref({
            left: '16.5%',
            top: '64.5%'
        });

        const backgroundImage = computed(() => {
            const publicPath = __webpack_public_path__ || '/';
            return `${publicPath}assets/Eddie51.png`;
        });

        const amplifierPanelStyle = computed(() => ({
            // backgroundImage: `url(${backgroundImage.value})`,
            backgroundSize: '85%',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat',
            width: '100%',
            height: '700px',
            position: 'relative',
            top: '10%',
            borderRadius: '10px',
            overflow: 'hidden'
        }));

        const handleKnobChange = ({ label, value }) => {
            console.log(`Knob ${label} changed to ${value}`);
            window.electronAPI.sendKnobValue(label, value);
        };

        return {
            controls,
            toggleSwitchPosition,
            amplifierPanelStyle,
            handleKnobChange
        };
    }
};
</script>

<style scoped>
.amplifier-panel {
    background-image: url('../assets/Eddie51.png');
    width: 100%;
    height: 600px;
    position: relative;
    top: 2%;
    border-radius: 10px;
    overflow: hidden;
}

.controls {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.toggle-switch {
    position: absolute;
    z-index: 1;
}
</style>